<template>
  <div class="app-container">
    <el-form :model="formData" label-width="120px" label-position="left">
      <el-form-item label="所属省">
        <el-select @change="provinceChange" v-model="formData.provinceId" placeholder="请选择省">
          <el-option
            v-for="item in provinceList"
            :key="item.regionId"
            :label="item.regionName"
            :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属市">
        <el-select @change="cityChange" v-model="formData.cityId" placeholder="请选择市">
          <el-option
            v-for="item in cityList"
            :key="item.regionId"
            :label="item.regionName"
            :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属区县">
        <el-select v-model="formData.districtId" placeholder="请选择区县">
          <el-option
            v-for="item in districtList"
            :key="item.regionId"
            :label="item.regionName"
            :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="高中性质">
        <el-select v-model="formData.nature" placeholder="请选择性质">
          <el-option
            v-for="item in natureList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="高中类型">
        <el-select v-model="formData.mType" placeholder="请选择类型">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="高中名称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
    </el-form>
    <div class="submit-box">
      <el-button type="primary" :loading="loading" style="width: 200px;" @click.native.prevent="doSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
  import { edit, getDetail } from '@/api/high_school'
  import { errorMsg, successMsg } from '@/utils/my'
  import { getChildren } from '@/api/region'

  export default {
    data() {
      return {
        loading: false,
        formData: {
          id: 0,
          provinceId: '',
          cityId: '',
          districtId: '',
          nature: '',
          mType: '',
          name: ''
        },
        provinceList: [],
        cityList: [],
        districtList: [],
        natureList: [
          {id: 1, name: '公办'},
          {id: 2, name: '民办'}
        ],
        typeList: [
          {id: 1, name: '省重点'},
          {id: 2, name: '省示范'},
          {id: 3, name: '市示范'},
          {id: 4, name: '普通'},
          {id: 5, name: '职高'}
        ],
        regionReqData: {
          parentId: 0,
          level: 1
        }
      }
    },

    created() {
      this.formData.id = this.$route.params.id
      this.fetchRegionData()
      this.fetchData()
    },

    methods: {

      fetchData() {
        let that = this
        getDetail({id: that.formData.id}).then(res => {
          that.formData.provinceId = res.data.highSchoolProvinceId
          that.formData.cityId = res.data.highSchoolCityId
          that.formData.districtId = res.data.highSchoolDistrictId <= 0 ? '' : res.data.highSchoolDistrictId
          that.formData.nature = res.data.highSchoolNature
          that.formData.mType = res.data.highSchoolType
          that.formData.name = res.data.highSchoolName

          getChildren({parentId: res.data.highSchoolProvinceId}).then(res => {
            if (res.code != 20000) {
              return errorMsg(res.message)
            }
            that.cityList = res.data
          })

          getChildren({parentId: res.data.highSchoolCityId}).then(res => {
            if (res.code != 20000) {
              return errorMsg(res.message)
            }
            that.districtList = res.data
          })
        })
      },

      doSubmit() {
        const that = this
        let d = JSON.parse(JSON.stringify(that.formData))
        if (d.provinceId.length <= 0) {
          return errorMsg('请选择省')
        }
        if (d.cityId.length <= 0) {
          return errorMsg('请选择市')
        }
        if (d.nature.length <= 0) {
          return errorMsg('请选择高中性质')
        }
        if (d.mType.length <= 0) {
          return errorMsg('请选择高中类型')
        }
        if (d.name.length <= 0) {
          return errorMsg('请输入高中名称')
        }
        that.loading = true
        d.districtId = d.districtId.length <= 0 ? 0 : d.districtId
        edit(d).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          setTimeout(function() {
            that.$router.push({path: '/admin/high-school/list'})
          }, 1500)
        })
      },

      fetchRegionData () {
        const that = this
        getChildren(that.regionReqData).then(res => {
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          if (that.regionReqData.level == 1) {
            that.provinceList = res.data
          } else if (that.regionReqData.level == 2) {
            that.cityList = res.data
          } else if (that.regionReqData.level == 3) {
            that.districtList = res.data
          }
        })
      },

      provinceChange(id) {
        this.cityList = []
        this.districtList = []
        this.formData.cityId = ''
        this.formData.districtId = ''
        this.regionReqData.parentId = parseInt(id)
        this.regionReqData.level = 2
        this.fetchRegionData()
      },

      cityChange(id) {
        this.districtList = []
        this.formData.districtId = ''
        this.regionReqData.parentId = parseInt(id)
        this.regionReqData.level = 3
        this.fetchRegionData()
      }

    }
  }
</script>

<style>
  .submit-box {
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding-right: 20px;
  }
</style>
